<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 300px;
			height: 500px;
			margin: 100px auto;
			background-color: skyblue;
			display: flex;
			/* flex-direction: row-reverse; */
			/* flex-direction: column; */
			/* flex-direction: column-reverse; */
			/* flex-wrap: wrap; */
			/* 换行 */
			/* flex-wrap: wrap-reverse; */
			/* flex-flow: row-reverse wrap-reverse; */
			/* justify-content: flex-end; */
			/* justify-content: center; */
			/* justify-content: space-between; */
			/* justify-content: space-around; */
			/* flex-wrap: wrap; */
			/* align-items: center; */
			/* align-items: flex-start; */
			/* align-items: flex-end; */
			/* align-items: stretch; */
			/* align-content: space-around; */
			/* align-content: space-between; */
		}
		.box div{
			width: 200px;
			height: 200px;
			text-align: center;
			line-height: 200px;
			font-size: 50px;
		}
		.box .one{
			background-color: red;
			/* order: 3; */
			/* flex-grow: 2; */
			flex-shrink: 0;
		}
		.box .two{
			background-color: orange;
			/* flex-grow: 2; */
		}
		.box .three{
			background-color: yellow;
			/* order: 2; */
			/* flex: 1; */
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="one">1</div>
		<div class="two">2</div>
		<div class="three">3</div>
		 <!-- <div class="one4">4</div> -->
		<!-- <div class="two">5</div>
		<div class="three">6</div>
		<div class="one">7</div>
		<div class="two">8</div> -->
		<!-- <div class="three">9</div> -->
	</div>
</body>
</html>